<template>
	<view class="box">
		<view style="padding-top:10rpx;">

		</view>
		<view class="topBox">
			<view class="content">
				<view class="start">
					<image src="@/static/common/qi.png" mode="" class="tag"></image>
					<view class="addressBox">
						<view class="city">
							{{data.startlocation}}
						</view>
						<view class="address">
							{{data.start_address}}
						</view>
					</view>
					<image src="@/static/common/location.png" mode="" class="location" @click="daohang"></image>
				</view>
				<view class="end">
					<image src="@/static/common/zhong.png" mode="" class="tag"></image>
					<view class="addressBox">
						<view class="city">
							{{data.endlocation}}
						</view>
						<view class="address">
							{{data.end_address}}
						</view>
					</view>
					<image src="@/static/common/location.png" mode="" class="location" @click="daohang1"></image>
				</view>
			</view>
		</view>
		<view class="centerBox">


			<view class="userBox">
				<view class="item">
					<image :src="data.driver_avatar" mode=""></image>
					<view class="title">
						{{data.driver_name}}
					</view>
				</view>
			</view>

			<view class="beizhu">
				备注：{{data.remark}}
			</view>

		</view>
		<view class="sectionBox">
			<view class="header">
				<view class="left">
					订单信息
				</view>
				<view class="right">
					费用 ￥{{data.total_price}}
				</view>

			</view>
			<view class="item">
				<view class="title">
					订单号
				</view>
				<view class="desc">
					{{data.order_no}} 复制
				</view>
			</view>
			<view class="item">
				<view class="title">
					出发时间
				</view>
				<view class="desc">
					{{data.departtime}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					乘车人数
				</view>
				<view class="desc">
					{{data.reserve}}个
				</view>
			</view>
		</view>

		<view class="bottomBox">
			<!-- <view class="left">
				<image src="@/static/common/msg.png" mode=""></image>
				<view class="title">
					联系客服
				</view>
			</view>
			<view class="rightbtn">
				<view class="cancel">
					联系车主
				</view>
				<view class="cancel" @click="toApplyRefund">
					取消订单
				</view>
				<view class="done" @click="showInCar=true">
					确认上车
				</view>
			</view> -->
		</view>
		
		<!-- 确认上车模态框 -->
		<u-modal :show="showInCar" title="提示" @confirm="confirmInCar" showCancelButton confirmColor="#26D360">
			<view style="text-align: center;">
				确定上车?
			</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		VUE_APP_RESOURCES_URL
	} from '@/config'
	//获取经纬度的封装
	// import common from '@/common/js/common.js'
	//引入uniImMethods
	// import uniIm from '@/uni_modules/uni-im/lib/main.js';
	import {
		navigationToStartPointByBike,
		getOrderDetail,
		orderDetail,
		confirmOrder,
		arriveOrderStartDestination,
		startDestination,
		arriveOrderDestination,
		planningRouter,
		coordinateConvert
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				path: {
					paths: []
				},
				wait_time: '0',
				wait_time1: '0',
				mapApp_list: [{
						name: '高德地图',
						pname: 'com.autonavi.minimap',
						action: 'iosamap://'
					},
					{
						name: '腾讯地图',
						pname: 'com.tencent.map',
						action: 'tencentmap://'
					},
				],
				scale: 16,
				includePoints: [{
						latitude: '',
						longitude: '',
					},
					{
						latitude: '',
						longitude: '',
					}
				],
				// {
				// 			latitude: '',
				// 			longitude: '',
				// 		},
				// 		{
				// 			latitude: '',
				// 			longitude: '',
				// 		}
				polyline1: [

				], //路线
				polyline: [{
					points: [],
					color: "#26D360",
					width: 28,
					arrowLine: true,
				}, ],
				marker: [], //标记点
				markers: [{
						id: 0,
						latitude: '',
						longitude: '',

						iconPath: "/static/index/qd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: "起点",
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48

					},
					{
						id: 1,
						latitude: '',
						longitude: '',

						iconPath: "/static/index/zd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: "终点",
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48

					},
				],
				qdInfo: {
					latitude: '',
					longitude: '',
					address: '',
				},
				zdInfo: {
					latitude: '',
					longitude: '',
					address: '',
				},
				type: 1, //待接单 2已取消 
				show: false,
				columns: [
					['1名司机', '2名司机', '3名司机', '4名司机', '5名司机', '6名司机', '7名司机', '8名司机']
				],
				num: 1,
				order_id: 0,
				data: {},
				placeid: 0,
				timer: 0,
				timer1: 0,
				xzLatitude: '',
				xzLongitude: '',
				
				showInCar:false, //确认上车模态框
			}
		},
		filters: {
			getFormatDuration(duration) {
				let time = parseInt(duration);
				let minute = 0; // 分
				let hour = 0; // 小时
				let day = 0; // 天
				if (time > 60) {
					minute = parseInt(time / 60);
					time = parseInt(time % 60);
					if (minute > 60) {
						hour = parseInt(minute / 60);
						minute = parseInt(minute % 60);
						if (hour > 24) {
							day = parseInt(hour / 24);
							hour = parseInt(hour % 24);
						}
					}
				}
				let result = '';
				if (time > 0) {
					result = "" + parseInt(time) + "秒";
				}
				if (minute > 0) {
					result = "" + parseInt(minute) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "小时" + result;
				}
				if (day > 0) {
					result = "" + parseInt(day) + "天" + result;
				}
				return result;
			},

		},
		onShow() {
			if (this.order_id) {
				this.getOrderDetail()
				// this.timerData()
			}
			this.xzLatitude = uni.getStorageSync('latitude')
			this.xzLongitude = uni.getStorageSync('longitude')

		},
		onUnload() {

			clearInterval(this.timer)
			this.timer = null
			clearInterval(this.timer1)
			this.timer1 = null
		},
		onHide() {
			console.log('onHide')
			clearInterval(this.timer)
			this.timer = null
			clearInterval(this.timer1)
			this.timer1 = null
		},
		onLoad(e) {
			if (e.order_id) {
				this.order_id = e.order_id
			}

		},

		methods: {

			// 申请退款页面
			toApplyRefund(){ 
				uni.navigateTo({
					url:'/pages/personalCenter/applyRefund'
				})
			},
			// 确认上车
			confirmInCar(){
				this.showInCar = false
			},
			
			
			
			
			
			
			

			allUsersClick() {
				console.log("43434")
				uni.navigateTo({
					url: 'passengerList'
				})
				// uni.navigateTo({
				// 	url:'collectMoney?order_id='+this.order_id+'&money='+this.data.total_amount
				// })
			},

			goChart() {
				console.log('goChart', this.data.ck_uid);
				uni.navigateTo({
					url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + this.data.ck_uid
				})
			},
			dingwei() {
				let mapObjs = uni.createMapContext('map', this)
				mapObjs.moveToLocation({
					latitude: this.qdInfo.latitude,
					longitude: this.qdInfo.longitude
				}, {
					complete: res => {}
				})
			},
			timerData1() {

				var that = this
				that.addTimerData1()
				clearInterval(this.timer1)
				that.timer1 = null
				that.timer1 = setInterval(() => {

					that.addTimerData1()
				}, 1000)
			},
			getFormatDuration(duration) {
				let time = parseInt(duration);
				let minute = 0; // 分
				let hour = 0; // 小时
				let day = 0; // 天
				if (time > 60) {
					minute = parseInt(time / 60);
					time = parseInt(time % 60);
					if (minute > 60) {
						hour = parseInt(minute / 60);
						minute = parseInt(minute % 60);
						if (hour > 24) {
							day = parseInt(hour / 24);
							hour = parseInt(hour % 24);
						}
					}
				}
				let result = '';
				if (time > 0) {
					result = "" + parseInt(time) + "秒";
				}
				if (minute > 0) {
					result = "" + parseInt(minute) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "时" + result;
				}
				if (day > 0) {
					result = "" + parseInt(day) + "天" + result;
				}
				return result;
			},
			addTimerData1() {
				var time = new Date().getTime() // 1667961973698
				var time1 = new Date(this.data.arriving_time).getTime() // 1667961973698
				console.log()
				this.wait_time = (time - time1) / 1000

				this.wait_time1 = this.getFormatDuration(this.wait_time)
				// console.log('1')
				// console.log(this.countDown(this.data.order_time))	
			},
			// 		 countDown(inputTime) {
			// 			//获取从1970年1月1日到现在的时间的毫秒数
			// 			var nowTime = +new Date(); 
			// 			//获取输入时间的毫秒数
			// 			var putTime = +new Date(inputTime); 
			// 			console.log(putTime-nowTime)	
			// 		    //剩余时间总的毫秒数 除以 1000 变为总秒数
			// 			var dec = (putTime-nowTime)/ 1000;
			// 				//得到天 格式化成前缀加零的样式
			// 		    var d =  parseInt(dec/60/60/24);
			// 		        d = d<10 ? '0'+ d : d;
			// 		        //得到小时 格式化成前缀加零的样式
			// 		       var h = parseInt(dec/60/60%24);
			// 		        h = h<10 ? '0'+ h : h;     
			// 		        //得到分钟 格式化成前缀加零的样式
			// 		        var m= parseInt(dec/60%60);
			// 		        m = m<10 ? '0'+ m: m;

			// 		 		//得到秒 格式化成前缀加零的样式
			// 		        s= parseInt(dec%60);
			// 		        s = s<10 ? '0'+ s : s;


			// 			return `${d}天${h}时${m}分${s}秒`;
			// },

			timerData() {
				console.log('123')
				var that = this
				clearInterval(this.timer)
				that.timer = null
				that.timer = setInterval(() => {

					that.getOrderDetail()
				}, 5000)
			},
			//地图标记
			getmarker() {
				this.marker = [{
						id: 1,
						latitude: this.qdInfo.latitude, //纬度
						longitude: this.qdInfo.longitude, //经度
						iconPath: "/static/index/qd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: this.qdInfo.address,
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48
					},
					{
						id: 2,
						latitude: this.zdInfo.latitude, //纬度
						longitude: this.zdInfo.longitude, //经度
						iconPath: "/static/index/zd.png",
						callout: {
							fontSize: 12,
							color: '#333333',
							content: this.zdInfo.address,
							bgColor: "#ffffff",
							display: "ALWAYS",
							padding: 8,
							borderRadius: 14
						},
						width: 24,
						height: 48
					},
				]
			},

			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			daohang() {
				let _this = this
				let latitude = Number(this.zdInfo.latitude);
				let longitude = Number(this.zdInfo.longitude);
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: this.zdInfo.address,
					address: this.zdInfo.address,
					success: function() {
						console.log('success');
					}
				});
			},
			daohang1() {
				let _this = this
				let latitude = Number(this.qdInfo.latitude);
				let longitude = Number(this.qdInfo.longitude);
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: this.qdInfo.address,
					address: this.qdInfo.address,
					success: function() {
						console.log('success');
					}
				});
			},
			zhifu() {
				uni.navigateTo({
					url: 'collectMoney?order_id=' + this.order_id + '&money=' + this.data.total_amount
				})
			},
			daoda1zd() {
				var that = this
				var data = {

					order_id: this.order_id
				}
				arriveOrderDestination(data)
					.then(res => {
						that.bofang(1)
						that.showToast(res.msg)
						uni.setStorageSync('order_id', 0)
						uni.setStorageSync('is_trace', 0)
						that.getOrderDetail()

					})
			},
			//去店铺还是用户地址 打开地图弹框
			Navigation(e) {
				let itemList = this.mapApp_list.map((item) => {
					return item.name
				})
				let _this = this
				this.placeid = e
				uni.showActionSheet({
					itemList: itemList,
					success: function(res) {
						_this.selectClick(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//点击要打开地图
			selectClick(index) {
				let obj = this.mapApp_list[index]
				obj.dst = this.placeid == 1 ? this.zdInfo.address :
					this.qdInfo.address
				this.navigaToShop(obj)
			},
			//打开app
			navigaToShop(obj) {

				//去店铺还是用户地址经纬度
				let longitude = this.placeid == 1 ? this.zdInfo.longitude : this.qdInfo.longitude
				let latitude = this.placeid == 1 ? this.zdInfo.latitude : this.qdInfo.latitude
				if (plus.runtime.isApplicationExist({
						pname: obj.pname,
						action: obj.action
					})) {
					var dst = new plus.maps.Point(longitude, latitude); // 目的点
					var src = new plus.maps.Point(common.getLocation(2), common.getLocation(3)); // 开始点
					// 调用系统地图显示 
					plus.maps.openSysMap(dst, obj.dst, src);
				} else {
					//在这里可以进行些针对未安装情况的操作,例如隐藏相应的功能
					uni.showToast({
						icon: 'none',
						title: '未安装' + obj.name + 'APP'
					})
				}
			},
			//到达终点
			daoda1() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否到达终点？',
					success: function(res) {
						if (res.confirm) {
							that.daoda1zd()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//到达起点
			daodaqd() {
				var that = this
				var data = {
					order_id: this.order_id
				}
				arriveOrderStartDestination(data)
					.then(res => {
						that.showToast(res.msg)
						that.getOrderDetail()

					})
			},
			daoda() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否到达起点？',
					success: function(res) {
						if (res.confirm) {
							that.daodaqd()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			actualPath() {

				var that = this
				this.polyline1 = []
				var list1 = []
				for (var i = 0; i < that.data.trace.length; i++) {
					var list = that.data.trace[i].location.split(',')
					var item = {
						latitude: list[1],
						longitude: list[0],
					}
					list1.push(item)
				}

				// that.polyline[0].points=list1
				// console.log(that.polyline[0])
				//这个就是走的路，下面有几个属性在app上不支持
				let polyline = {
					points: list1,
					color: "#26D360",
					arrowLine: true, //带箭头的线
					dottedLine: true,
					width: 16, //线宽

					// colorList: true,

				}
				// console.log(polyline)
				this.polyline1.push(polyline)
				this.polyline = this.polyline1

			},
			phoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			dengdai() {

			},
			bofang(type) {


				var url = VUE_APP_RESOURCES_URL + '/yuyin/ksdd.mp3'
				if (type == 1) {
					url = VUE_APP_RESOURCES_URL + '/yuyin/jsdd.mp3'
				}
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			fuwu1() {
				var that = this
				var data = {
					wait_time: this.wait_time,
					order_id: this.order_id
				}
				startDestination(data)
					.then(res => {
						that.bofang()
						that.showToast(res.msg)
						uni.setStorageSync('order_id', that.order_id)
						uni.setStorageSync('is_trace', 1)
						var is_trace = uni.getStorageSync('is_trace')
						var order_id = uni.getStorageSync('order_id')
						console.log(is_trace)
						console.log(order_id)
						that.getOrderDetail()

					})
			},
			fuwu() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否开始服务？',
					success: function(res) {
						if (res.confirm) {
							that.fuwu1()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			judan(type) {
				uni.navigateTo({
					url: 'cancelOrder?order_id=' + this.order_id + "&type=" + type
				})
			},
			confirmOrder() {
				var that = this
				var data = {
					order_id: this.order_id
				}
				confirmOrder(data)
					.then(res => {
						that.showToast(res.msg)
						that.getOrderDetail()

					})
			},
			planningRouter(start_point, end_point) {
				var that = this
				var data = {
					start_point: start_point,
					end_point: end_point
				}
				planningRouter(data)
					.then(res => {
						that.path = res.data
						that.pathPlanning()
						if (!this.type) {
							that.countEstimatedPrice()
						}

					})
			},
			pathPlanning() {
				var list = []
				var list1 = []

				this.path.paths[0].steps.forEach(item2 => {
					let polylineList1 = item2.polyline.split(";");
					polylineList1.forEach((item4, index) => {
						let polylineList = item4.split(",");
						polylineList.forEach((item3, index) => {
							if (index % 2) {
								list.push(item3)

							} else {
								list1.push(item3)
							}
						})
					})

				})

				for (var i = 0; i < list.length; i++) {
					var item = {
						latitude: list[i],
						longitude: list1[i],
					}

					this.polyline[0].points.push(item)
				}
				console.log(this.polyline)

			},

			planning_route() {
				var that = this
				var list1 = []
				this.polyline1 = []
				for (var i = 0; i < that.data.planning_route.trace.length; i++) {
					var list = that.data.planning_route.trace[i].split(',')
					var item = {
						latitude: list[1],
						longitude: list[0],
					}
					list1.push(item)
				}

				// that.polyline[0].points=list1
				// console.log(that.polyline[0])
				//这个就是走的路，下面有几个属性在app上不支持
				let polyline = {
					points: list1,
					color: "#26D360",
					arrowLine: true, //带箭头的线
					dottedLine: true,
					width: 16, //线宽

					// colorList: true,

				}
				// console.log(polyline)
				this.polyline1.push(polyline)
				this.polyline = this.polyline1

			},
			getOrderDetail() {
				var that = this
				var data = {
					id: this.order_id
				}
				orderDetail(data)
					.then(res => {
						that.data = res.data


					})
					.catch(err => {
					
					})
			},
			set() {
				// 1待接单 2已取消 3已接单 4进行中 5已完成
				var order_status = Number(this.data.order_status)
				// 状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消
				if (order_status == 10) {
					this.type = 1
					this.navigationToStartPointByBike(this.xzLongitude + ',' + this.xzLatitude, this.data
						.starting_point)
				}

				if (order_status == 70) {
					this.type = 2

				}
				if (order_status == 20) {
					this.type = 3

				}
				if (order_status == 30) {
					this.type = 6

				}
				if (order_status == 50) {
					this.type = 7

				}
				if (order_status == 40) {
					this.type = 4

				}
				if (order_status == 60) {
					this.type = 5

				}

				this.setNavTitle()
			},
			navigationToStartPointByBike(start_point, end_point) {
				var that = this
				var data = {
					start_point: start_point,
					end_point: end_point
				}
				navigationToStartPointByBike(data)
					.then(res => {
						that.path = res.data
						// that.pathPlanning()
						// if (!this.type) {
						// 	that.countEstimatedPrice()
						// }

					})
			},
			setNavTitle() {
				if (this.type == 1) {
					uni.setNavigationBarTitle({
						title: '新订单'
					})
				}
				if (this.type == 2) {
					uni.setNavigationBarTitle({
						title: '订单已取消'
					})
				}
				if (this.type == 3) {
					uni.setNavigationBarTitle({
						title: '订单已接单'
					})
				}
				if (this.type == 6) {
					uni.setNavigationBarTitle({
						title: '到达起点'
					})
				}
				if (this.type == 7) {
					uni.setNavigationBarTitle({
						title: '待支付'
					})
				}
				if (this.type == 4) {
					uni.setNavigationBarTitle({
						title: '订单进行中'
					})
				}
				if (this.type == 5) {
					uni.setNavigationBarTitle({
						title: '订单已完成'
					})

				}
			},
			passengerInfoClick() {
				uni.navigateTo({
					url: 'passengerInfo'
				})
			},
			cancelClick() {
				this.type = 2
				this.setNavTitle()
			},
			orderDetailClick() {
				this.type = 1
				this.setNavTitle()

			},
			descriptionClick() {
				uni.navigateTo({
					url: 'description'
				})
			},

		}
	}
</script>


<style lang="scss" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #F9F9F9;
		// background: linear-gradient( 180deg, #26D360 0%, rgba(38,211,96,0) 100%);
	}

	.topBox {

		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 30rpx;
		padding: 30rpx;

		.content {

			.start,
			.end {
				width: 100%;
				;
				height: 100rpx;
				// padding:30rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;

				image.tag {
					width: 28rpx;
					height: 28rpx;
				}

				.addressBox {
					margin-left: 20rpx;

					.city {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}

					.address {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #9E9E9E;
					}
				}

				.location {
					position: absolute;
					right: 20rpx;
					top: 30rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

	}

	.centerBox {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;

		.userBox {
			display: flex;
			justify-content: flex-start;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
			}
		}

		.beizhu {
			width: 630rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #F9F9F9;
			border-radius: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #797979;
			padding-left: 20rpx;
			margin-top: 20rpx;
		}

	}


	.sectionBox {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 30rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				padding: 30rpx;
			}

			.right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 24rpx;
				padding: 30rpx;
			}
		}

		.item {
			display: flex;
			justify-content: flex-start;
			padding: 10rpx 30rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #797979;
				min-width: 160rpx;
			}

			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}

	.bottomBox {
		width: 750rpx;
		height: 132rpx;
		background: #FFFFFF;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}

		.rightbtn {
			display: flex;
			justify-content: flex-start;

			.cancel {
				width: 164rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 2rpx solid #eee;

				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				border-radius: 30rpx;
				color: #797979;
				margin-left: 20rpx;
			}

			.done {
				width: 164rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #26D360;
				border-radius: 30rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-left: 20rpx;

			}
		}

	}
</style>